<template>
  <section class="allCon">
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end  面包屑-->
    <!--start content-->
    <div class="content" id="content" ref="pageContent">

      <!--新增模块名称  start-->
      <div class="height-search">
        <transition name="fade">
          <div class="modal-backdrop" v-show="vue_addNewModuleShow"></div>
        </transition>
        <transition name="slideDown">
          <div class="height-s-con" v-show="vue_addNewModuleShow">
            <p class="search-title" v-if=" vue_modifyModuleSHow">修改</p>
            <p class="search-title"v-else>新增</p>
            <el-form ref="addForm" :model="addModuleNameData" label-width="80px">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="模块名称" prop="docPlaceName">
                    <el-input v-model="addModuleNameData.docPlaceName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label-width="14px">
                <el-button :disabled="clickBtn" @click="addModuleNameSure" type="primary">确定</el-button>
                <el-button @click="ModuleCancel">取消</el-button>
              </el-form-item>
            </el-form>

          </div>
        </transition>
      </div>
      <!--新增模块名称  end-->

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="con-left">
            <h2 class="con-title-h2">
              <span>模块管理</span>
              <i class="add-con" @click="addModule_btn">新增</i>
            </h2>
            <ul class="con-ul">
              <li v-for="(item,index) in ModuleNameData.list">
                 <div class="con-li-con" @click="changeConList_btn(item,index)">
                   <span class="con-l-list-title">{{item.docPlaceName}}</span>
                   <div class="con-l-list-do">
                     <span @click="modifyModuleName(item,index)"><em class="iconfont">&#xe617;</em>修改</span>
                     <span @click="topModuleName(item,index)"><em class="iconfont">&#xe663;</em>置顶</span>
                   </div>
                 </div>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="con-right">
            <div class="con-right-top">
              <h2 class="con-title-h2">
                <span>快速搜索</span>
              </h2>
              <el-form class="con-form" ref="form" :model="conFormQb"label-width="100px">
                <el-row>
                    <el-col :span="20">
                      <el-form-item label="标题" prop="docListTitile">
                        <el-input v-model="conFormQb.docListTitile"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3">
                      <i class="add-con" @click="queryCondition_Btn">查询</i>
                    </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="时间" prop="createDateStr">
                      <el-date-picker type="daterange" placeholder="选择时间" v-model="conFormQb.createDateStr"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="状态" prop="dataBillstateStr">
                      <el-select v-model="conFormQb.dataBillstateStr" placeholder="请选择状态">
                        <el-option  label="全部"  value=""></el-option>
                        <el-option v-for="(item,index) in vue_conData" :label="item.billstateName" :value="item.billstateValue"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <i class="add-con" @click="queryEmpty_Btn">清空</i>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="con-right-bottom">
              <h2 class="con-title-h2">
                <span>内容列表</span>
              </h2>
              <div class="con-list-top">
                <div class="piliangCao" v-if="vue_tabActive>0" >
                  <em class="iconfont close" @click="off_checked">&#xe630;</em>
                  已选<span>{{vue_tabActive}}</span>项<em style="font-style: normal;margin: 0px 20px;">|</em>
                  <a @click="batchPublic_btn"><em class="iconfont">&#xe652;</em>发布</a>
                  <a @click="batchCancel_btn"><em class="iconfont">&#xe69f;</em>撤销</a>
                  <a @click="batchDelete_btn"><em class="iconfont">&#xe616;</em>删除</a>
                </div>
                <i class="add-con" @click="addNewCon_btn" v-else>新增</i>
              </div>
              <div class="con-table">
                <el-table ref="multipleTable" :data="conDataSet.list" @selection-change="row_handleSelectionChange" :max-height="190" border style="width: 100%">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="docPlaceCode" label="所属菜单" sortable width="180"></el-table-column>
                  <el-table-column prop="docListTitile" label="标题" sortable width="180"></el-table-column>
                  <el-table-column prop="dataBillstateStr" label="状态"></el-table-column>
                  <el-table-column prop="createDateStr" label="发布时间"></el-table-column>
                  <el-table-column prop="" label="" fixed="right" width="60" >
                    <template scope="scope">
                      <el-popover trigger="hover" placement="bottom">
                        <p class="p" style="cursor: pointer;" @click="batchModify_btn(scope.$index,scope.row)">
                          <em class="iconfont">&#xe617;</em>修改
                        </p>
                        <p class="p" style="cursor: pointer;" @click="batchToTop_btn(scope.$index,scope.row)">
                          <em class="iconfont">&#xe663;</em>置顶
                        </p>
                        <div slot="reference" class="name-wrapper" style="text-align: center;">
                          <em class="iconfont tab-hover">&#xe607;</em>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <!--翻页 start-->
              <div class="block">
                <el-pagination
                  @size-change="page_handleSizeChange"
                  @current-change="page_handleCurrentChange"
                  :current-page="parseInt(conDataSet.pageTools.pageNo)"
                  :page-sizes="conDataSet.pageTools.pageSizeOptions"
                  :page-size="parseInt(conDataSet.pageTools.pageSize)"
                  :total="parseInt(conDataSet.pageTools.recordCount)"
                  layout="total, prev, pager, next, sizes,jumper">
                </el-pagination>
              </div>
              <!--翻页 end-->
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--end content-->
  </section>
</template>
<script>
  export default {
    data() {
      return {
        vue_tabActive:"",   //table项选中数
        clickBtn:false,     //新增模块名称按钮（点击后置灰）
        vue_addNewModuleShow:false,   //新增模块名称（显示、隐藏）
        vue_modifyModuleSHow:false,    //修改模块名称（显示、隐藏）
        vue_docPlaceCode:"",       //存储修改模块Code
        vue_url:"",      //存储（修改）或（新增）的模块名称url
        vue_method:"",   //存储（修改）或（新增）的模块名称method
        vue_docListCodeStr:"",    //存储内容选中项的docListCode
        ModuleNameData:{         //模块名称列表
            list:[],
        },
        addModuleNameData:{    //新增模块名称
          docPlaceName:"",
        },
        //快速（搜索）
        conFormQb:{
          docListTitile:"",     //标题
          dataBillstateStr:"",    //状态
          createDateStr:"",      //时间
        },
        //内容（列表）
        conDataSet:{
          list:[],   //内容列表
          pageTools:{},    //翻页对象
        },
        vue_conData:"",  //存储快速搜索（下拉项）的状态
      }
    },

    watch:{
      //监视vue_docPlaceCode
      vue_docPlaceCode:function(val,oldVal){
          console.log(val)
          return val
      },
    },

    methods: {

      //内容列表（修改）
      batchModify_btn(index,data){
        localStorage.setItem("docListCode",data.docListCode);
        this.$router.push({path:"/portalContentAdd"});
      },

      //内容列表（置顶）
      batchToTop_btn(index,data){
        this.axios({
          method: 'PATCH',
          url: "/v3/portal/docLists/" + data.docListCode + "/stick",
          data:{},
        }).then((res) => {
          this.Public.openSuccess(this,"操作成功！");
          this.queryDocListsByPage();
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //内容列表（删除）
      batchDelete_btn(){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 24px;margin-bottom: 8px;'}, '是否确认删除？'),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm') {
            this.axios({
              method: 'DELETE',
              url: "/v3/portal/docLists/" + this.vue_docListCodeStr,
              data: {}
            }).then((res) => {
              this.Public.openSuccess(this,"操作成功！");
              this.queryDocListsByPage();
            }).catch((err)=>{
              this.Public.openError(this,err);
            });
          }
        });
      },

      //内容列表（发布）
      batchPublic_btn(){
        this.axios({
          method: 'PATCH',
          url: "/v3/portal/docLists/" + this.vue_docListCodeStr + "/batchEnable",
          data:{},
        }).then((res) => {
          this.Public.openSuccess(this,"操作成功！");
          this.queryDocListsByPage();
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //内容列表（撤销）
      batchCancel_btn(){
        this.axios({
          method: 'PATCH',
          url: "/v3/portal/docLists/" + this.vue_docListCodeStr + "/batchDisable",
          data:{},
        }).then((res) => {
          this.Public.openSuccess(this,"操作成功！");
          this.queryDocListsByPage();
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //新增内容
      addNewCon_btn(){
        localStorage.setItem("vue_docPlaceCode",this.vue_docPlaceCode);
        this.$router.push({path:"/portalContentAdd"});
      },

      //关闭复选框
      off_checked(){
        this.vue_tabActive = '';
        this.$refs.multipleTable.clearSelection()
      },

      //table项复选框选择
      row_handleSelectionChange(val) {
        this.multipleSelection = val;
        this.vue_tabActive=val.length;
        this.vue_docListCodeStr = "";
        for(let i=0,len=val.length;i<len;i++){
          this.vue_docListCodeStr += val[i].docListCode+","
        }
        this.vue_docListCodeStr = this.vue_docListCodeStr.substring(0,this.vue_docListCodeStr.length-1);
      },

      //点击模块名称刷新列表
      changeConList_btn(item,index){
        this.vue_docPlaceCode = item.docPlaceCode;
        this.axios({
          method: 'post',
          url: "/v3/portal/docLists/list",
          data:{
            "limit":this.conDataSet.pageTools.pageSize,
            "offset":(this.conDataSet.pageTools.pageNo-1)*this.conDataSet.pageTools.pageSize,
            "supStartDate":this.conFormQb.createDateStr[0],
            "supEndDate":this.conFormQb.createDateStr[1],
            "dataBillstate":this.conFormQb.dataBillstateStr,
            "fullTextFilterStr":this.conFormQb.docListTitile,
            "docPlaceCode":item.docPlaceCode,
          },
        }).then((res) => {
          this.conDataSet.list = res.data.list;
          this.conDataSet.pageTools=res.data.pageTools;
          this.conDataSet.pageTools.pageSizeOptions = JSON.parse(this.conDataSet.pageTools.pageSizeOptions);
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //（内容列表）初始化
      queryDocListsByPage(){
        this.axios({
          method: 'post',
          url: "/v3/portal/docLists/list",
          data:{
            "limit":this.conDataSet.pageTools.pageSize,
            "offset":(this.conDataSet.pageTools.pageNo-1)*this.conDataSet.pageTools.pageSize,
            "supStartDate":this.conFormQb.createDateStr[0],
            "supEndDate":this.conFormQb.createDateStr[1],
            "dataBillstate":this.conFormQb.dataBillstateStr,
            "fullTextFilterStr":this.conFormQb.docListTitile,
            "docPlaceCode":this.vue_docPlaceCode,
          },
        }).then((res) => {
          this.conDataSet.list = res.data.list;
          this.conDataSet.pageTools=res.data.pageTools;
          this.conDataSet.pageTools.pageSizeOptions = JSON.parse(this.conDataSet.pageTools.pageSizeOptions);
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //快速搜索（查询）
      queryCondition_Btn(){
        this.queryDocListsByPage();
      },

      //快速搜索（清空）
      queryEmpty_Btn(){
        this.conFormQb.docListTitile = "";
        this.conFormQb.dataBillstateStr = "";
        this.conFormQb.createDateStr = "";
        this.queryDocListsByPage();
      },

      //快速搜索查询（下拉项展示）
      querySelectBillState(){
        this.axios({
          method: 'POST',
          url: "/v3/system/billstates/SystemBillstate003/listAll",
          data:{}
        }).then((res) => {
          this.vue_conData = res.data.list;
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //模块名称（置顶）
      topModuleName(item,index){
        this.axios({
          method: 'PATCH',
          url: "/v3/portal/docPlaces/" + item.docPlaceCode + "/stick",
          data:{}
        }).then((res) => {
          this.queryDocPlaces();
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //（新增）或（修改）模块名称（确认按钮）
      addModuleNameSure(){
        this.clickBtn = true;
        if(this.vue_modifyModuleSHow){
          this.vue_url= "/v3/portal/docPlaces/" + this.vue_docPlaceCode;
          this.vue_method = "PUT";
        }else{
          this.vue_url= "/v3/portal/docPlaces";
          this.vue_method = "POST";
        }
        this.axios({
          method: this.vue_method,
          url:this.vue_url,
          data:{
            "docPlaceName":this.addModuleNameData.docPlaceName,
          }
        }).then((res) => {
          this.clickBtn = false;
          this.addModuleNameData.docPlaceName = "",
          this.queryDocPlaces();
          this.vue_modifyModuleSHow =false;
          this.vue_addNewModuleShow = false;
          this.Public.openSuccess(this,"操作成功！");
        }).catch((err)=>{
          this.clickBtn = false;
          this.Public.openError(this,err.response.data);
        });
      },

      //（新增）或（修改）模块名称（取消按钮）
      ModuleCancel(){
        this.vue_addNewModuleShow = false;
        this.vue_modifyModuleSHow = false;
        this.addModuleNameData.docPlaceName = "";
      },

     //（点击）新增模块名称（显示新增框）
      addModule_btn(){
        this.vue_addNewModuleShow = true;
        this.vue_modifyModuleSHow = false;
      },

     //（修改）模块名称
      modifyModuleName(item,index){
        this.vue_addNewModuleShow = true;
        this.vue_modifyModuleSHow = true;
        this.vue_docPlaceCode = item.docPlaceCode;
        this.addModuleNameData.docPlaceName = item.docPlaceName;
      },

      //初始化模块名称列表
      queryDocPlaces(){
        this.axios({
          method: 'POST',
          url: "/v3/portal/docPlaces/listAll",
          data:{
          }
        }).then((res) => {
          this.ModuleNameData.list = res.data.list;
          this.vue_docPlaceCode = this.ModuleNameData.list[0].docPlaceCode;
          this.queryDocListsByPage();   //内容列表初始化
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //每页几条
      page_handleSizeChange(val) {
        this.conDataSet.pageTools.pageSize = val;
        this.queryDocListsByPage();
      },

      //当前第几页
      page_handleCurrentChange(val) {
        this.conDataSet.pageTools.pageNo = val;
        this.queryDocListsByPage();
      },

    },

    created(){
      //翻页
      this.conDataSet.pageTools = this.$store.state.page;
    },

    mounted() {
      // 设置窗口高度 start
      var winHieg = document.documentElement.clientHeight;
      var cont = document.getElementById("content");
      cont.style.height = winHieg - 115 + "px";
      this.queryDocPlaces();      //模块名称列表初始化
      this.querySelectBillState();  //快速搜索（下拉项）展示
    },

  }
</script>
<style scoped>

  .p {
    text-indent: 10px;
    line-height: 30px;
    padding-right:10px;
  }

  .p em {
    position: relative;
    top: 2px;
    margin-right: 3px;
  }

  .p:hover {
    background: #eef1f9;
    color: #03B8CC;
  }

  .con-list-top{
    height: 32px;
    line-height: 32px;
    margin-top: 10px;
    padding: 0 10px;
  }

  .piliangCao{
    margin-left: -6px;
    height: 36px;
    line-height: 36px;
  }

  .piliangCao em {
    font-size: 14px;
  }

  .close{
    margin: 2px 20px;
    position: relative;
    top: 2px;
    cursor: pointer;
  }

  .close:hover{
    color: #13C19F!important;
  }

  .piliangCao a {
    cursor: pointer;
    color: #768696;
    margin-right: 20px;
  }
  .piliangCao a:hover{
    color: #03B8CC;
  }

  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
    margin-bottom: 20px;
  }


  .height-s-con {
    position: absolute;
    width: 100%;
    height: 210px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .con-table{
    padding: 10px 10px;
  }

  .block {
    float: right;
    margin: 15px;
  }

  .con-form{
    padding: 6.5px 0;
  }

  .con-right-bottom{
    border: 1px #999999 solid;
    height: 343px;
  }

  .con-right-top{
    border: 1px #999999 solid;
    height: 140px;
    margin-bottom: 15px;
  }

  .con-l-list-do span:hover{
    opacity: 0.7;
  }

  .con-l-list-do span{
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 12px!important;
  }

  .con-l-list-do span em{
    font-size: 14px;
  }

  .con-l-list-do{
    float: right;
    display: none;
  }

  .con-l-list-title{
    float: left;
    height: 30px;
    line-height: 30px;
  }

  .con-li-con:hover .con-l-list-do{
    display: block;
    color: #415161;
  }

  .con-li-con:hover{
    background: #e4ecf1;
    color: #03B8CC;
  }

  .con-li-con{
    display: block;
    height: 30px;
    padding: 0px 10px;
    cursor: pointer;
  }

  .con-ul li{
    overflow: hidden;
    padding: 5px;
  }

  .con-ul{
    overflow: hidden;
  }

  .add-con{
    display: block;
    color: white;
    float: right;
    background: #13C19F;
    height: 24px;
    line-height: 24px;
    margin-top: 6px;
    width: 60px;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
  }

  .con-title-h2 span{
    color: #03B8CC;
    float: left;
  }

  .con-title-h2{
    font-weight: normal;
    font-size: 13px;
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    background: #eef1f9;
  }

  .con-right{
    height:500px;
  }

  .con-left{
    border: 1px #999999 solid;
    height:500px;
    overflow-y: auto;
  }

  .allCon{
    position: relative;
  }

  .location{
    padding: 3px 0 15px 0;
  }

  .content{
    background: #fff;
    padding: 15px;
    overflow-y: auto;
    font-family: "微软雅黑";
    position: relative;
  }

  .fade-enter-active, .fade-leave-active {
    transition: .4s;
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

  .slideDown-enter-active, .slideDown-leave-active {
    transition: .4s;
  }

  .slideDown-enter, .slideDown-leave-active {
    height: 0;
    opacity: 0;
  }
</style>
